<template>
    <div id="news" class="news">
        <!-- 简单的for循环 -->
        <!-- <h2 v-for="(n,index) in news" :key="n.id" :index="index">{{n.title}}</h2> -->
        <!-- 循环子路由 -->
        <ul>
            <li v-for=" n in news " :key="n.id" >
            
                <RouterLink :to="{
                    //如果是 query 这里既可以用 path 也可以用 name
                     name:'ziyemian',
                    //path:'/news/detail',
                    //如果是 params 那么这里只能由 name指定
                    //并且 使用 param 还必须占位
                    params:{
                        id:n.id,
                        title:n.title,
                        content:n.content
                    }
                }">
                {{ n.title}}
            </RouterLink>
            </li>
        </ul>

    </div>

    <div class="news-detail">
        <RouterView />
    </div>
</template>

<script lang="ts" setup name="news">
import { reactive } from 'vue'
import { useRoute ,RouterView } from 'vue-router'


let news = reactive([
    { id: 1, title: '新闻1', content: '这是一个内容' },
    { id: 2, title: '新闻2', content: '这是一个内容' },
    { id: 3, title: '新闻3', content: '这是一个内容' }
]);

const route = useRoute()

console.log('@@@',route)




</script>

<style>
h2 {
    margin-top: 20px;
    margin-left: 15px;
}

.active {
    border: 2px solid greenyellow;
}

.subButton {
    width: 60px;
    height: 40px;
    margin-top: 15px;
    margin-left: 30px;
}

.news{
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.news ul{
    margin-top: 30px;
    list-style: none;
    padding-left: 10px;
}

.news li > a{
    font-size: 18px;
    line-height: 40px;
    text-decoration: none;
    color: #64967E;
    text-shadow: 0 0 1px rgb(0,84,0);
}
</style>